<template>
	<view class="order">
		<u-sticky bgColor="#fff" >
		    <u-tabs :list="tabs"
			:scrollable="false"
			:current='currentIndex'
			 lineWidth="30"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#ff0000',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)',
			        }"
			        :inactiveStyle="{
			            color: '#090000',
			            transform: 'scale(1)'
			        }"
			        itemStyle="border-bottom: 1px solid #ddd; height: 40px; " @click="getOrder">
					</u-tabs>
		  </u-sticky>
		  
	<view class="orders">
		<view class="orders-ul">
			<view class="ul-header">
				<view class="_h1">
					<view>
						<image src="../../static/首页.png"></image>
					</view>
					<text>夏日流星限定贩卖</text>
					<u-icon name="arrow-right" label-pos="right"></u-icon>
				</view>
				<view class="span">
					待付款
				</view>
			</view>
			<view class="orders-li">
				<view class="li-image">
					<!-- <image src="../../static/img/userface/1.jpg"></image> -->
				</view>
				<view class="li-detail">
					<view class="name">
						【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g
					</view>
					<view class="line">
						灰色;M
					</view>
					<view class="time">
						<text>发货时间&nbsp;付款后的30天内发货</text>
					</view>
				</view>
				<view class="prcie">
					<view class="p">￥135.00</view>
					<view class="t">x1</view>
				</view>
			</view>
			<view class="orders-li">
				<view class="li-image">
					<image src="../../static/img/userface/1.jpg"></image>
				</view>
				<view class="li-detail">
					<view class="name">
						【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g
					</view>
					<view class="line">
						灰色;M
					</view>
					<view class="time">
						<text>发货时间&nbsp;付款后的30天内发货</text>
					</view>
				</view>
				<view class="prcie">
					<view class="p">￥135.00</view>
					<view class="t">x1</view>
				</view>
			</view>
			<view class="sumPrice">
				<view class="text1">共3件商品&nbsp;合计:</view>
				<view class="text2">￥483.58</view>
			</view>
			<view class="buttom">
				<view class="t2">
					<u-icon name="more-dot-fill"></u-icon>
				</view>
				<view>
					<u-button type="default" shape="circle" :plain="true">查看订单</u-button>
				</view>
				<view>
					<u-button type="default" shape="circle" :plain="true">出售</u-button>
				</view>
				<view>
					<u-button type="default" color="#ead932" shape="circle" :plain="true">评价</u-button>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:[
				{name:'待付款', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待发货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待收货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
				{name:'待评价', goods: null, num:1, y:0, curPageLen:0, hasNext:true}
				],
				currentIndex:0,
			}
		},
		methods: {
			getOrder(e){
				this.currentIndex = e.index;
			}
		}
	}
</script>

<style lang="scss">
	.order{
		background-color: #f2f2f2;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		.orders{
			padding: 10px;
			.orders-ul{
				background-color: white;
				padding: 10px;
				border-radius: 10px;
				.ul-header{
					height: 30px;
					line-height: 30px;
					font-weight: bold;
					._h1{
						float: left;
						display: flex;
						height: 100%;
						width: 170px;
						justify-content: space-between;
					}
					.span{
						font-size: 15px;
						float: right;
						color: gold;
					}
				}
				.ul-header image{
					width: 15px;
					height:15px;
				}
				.orders-li{
					display: flex;
					font-size: 12px;
					margin-top: 10px;
					.li-detail{
						padding: 5px;
						overflow: hidden;
						.name{
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 20px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}
						.line{
							color: gray;
							margin-top: 5px;
						}
						.time{
							margin-top: 5px;
							color: #ead932;
						}
					}
					.prcie{
						text-align: right;
						width: 100px;
						height: 100%;
						.p{
							margin-top: 10px;
						}
						.t{
							color: gray;
						}

					}
				}
				.orders-li image{
					width: 90px;
					height: 90px;
					border-radius: 8px;
				}
				.sumPrice{
					height: 40px;
					line-height: 40px;
					display: flex;
					.text1{
						font-size: 12px;
						margin-left: 53%;
					}
				}
				.buttom{
					display: flex;
					padding: 5px;
					justify-content: space-between;
					.t2{
						height: 100%;
						margin-top: 10px;
					}
				}
				.buttom button{
					height: 30px;
					width: 80px;
					font-size: 13px;
					border: 1px solid gainsboro;
				}
			}
		}
	}
</style>
